new Vue({
    el:'#app',
    data:{
        index:{
            // 用户头像
            'peopleImage':'image/T.png',
            // 用户名字
            'peopleName':'debug',
            // 用户id
            'peopleId':'105711',
            // 用户金币
            'peopleMoney':400,
            // 用户房卡
            'peopleRoomCard':500,
            // 客服公众号
            'peopleWeixin':'132456',
            // 商城购买金币图片
            'shopingMoneyImage':'image/shop/jb.png',   //jinbi
            // 商城购买房卡图片
            'shopingRoomImage':'image/shop/gmfk.png', //gmfk  fangka
            // 遮盖层
            'bor':0,
            // 公告内容
            'bulletinText':'我还sad黑科技爱神的箭按时打卡是点击卡还是几款等哈就开始搭建爱神的箭卡是的接口哈撒就带回家卡萨丁哈健康'
        },
        // 游戏页面使用变量
        play:{
            // 房间号
            'RoomNum':"123456",
            // 本人分数
            'FractionNume':0.00,
            // 队友分数
            'FractionNumes':0.00,
            // 十分
            'tenNum':'10fen',
            // 二十分
            'ertenNum':'20fen',
            // 三十分
            'santenNum':'30fen',
            // 四十分
            'sitenNum':'40fen',
            // 五十分
            'wutenNum':'50fen',
            // 问号
            'wenNum':'wen',
             // 十分
             'tenNums':'10fen',
             // 二十分
             'ertenNums':'20fen',
             // 三十分
             'santenNums':'30fen',
             // 四十分
             'sitenNums':'40fen',
             // 五十分
             'wutenNums':'50fen',
             'wenNums':'wen',
        },
        // 房卡
        fnagka:[
            {
                img:'image/shop/fangka/10.png',
                money:10
            }, 
            {
                img:'image/shop/fangka/100.png',
                money:100
            }, 
            {
                img:'image/shop/fangka/200.png',
                money:200
            },
            {
                img:'image/shop/fangka/500.png',
                money:500
            },
            {
                img:'image/shop/fangka/1000.png',
                money:1000
            },
            {
                img:'image/shop/fangka/2000.png',
                money:2000
            },
            {
                img:'image/shop/fangka/300.png',
                money:3000
            },
            {
                img:'image/shop/fangka/5000.png',
                money:5000
            },
        ],
        // 金币
        jinbi:[
            {
                img:'image/shop/jinbi/5jb.png',
                money:5
            },
            {
                img:'image/shop/jinbi/10¥.png',
                money:10
            },
            {
                img:'image/shop/jinbi/50¥.png',
                money:50
            },
            {
                img:'image/shop/jinbi/100¥.png',
                money:100
            },
            {
                img:'image/shop/jinbi/200¥.png',
                money:200
            },
            {
                img:'image/shop/jinbi/300¥.png',
                money:300
            },
            {
                img:'image/shop/jinbi/500¥.png',
                money:500
            },
            {
                img:'image/shop/jinbi/1000¥.png',
                money:1000
            },
        ],
        // 金币场
        jinbiC:[
            {
                img:'image/jinbi/50.png',
                money:50,
                peo:11
            },
            {
                img:'image/jinbi/100.png',
                money:100,
                peo:12
            },
            {
                img:'image/jinbi/200.png',
                money:200,
                peo:13
            },
            {
                img:'image/jinbi/300.png',
                money:300,
                peo:14
            },
            {
                img:'image/jinbi/500.png',
                money:500,
                peo:15
            },
            {
                img:'image/jinbi/1000.png',
                money:1000,
                peo:16
            },
        ],
        RoomNumber:string='',
         // 值
        zhi:number=0,
        // 商城
        isShoping:boolean = false,
        // 购买房卡
        isRoomImageC:boolean = false,
        // 购买金币
        isMoneyImageC:boolean = true,
        //金币场背景
        isBj:boolean = false,
        // 金币场选择
        isJinbiSelect:boolean = false,
        // 房卡场选择
        isRoomSelect:boolean = false,
        // 公告
        isBulletin:boolean = false,
        // 代理
        isAgency:boolean = false,
        // 战绩
        isMilitary:boolean = false,
        // 玩法帮助
        isHelp:boolean = false,
        // 力度表
        isVigorBor:boolean = false,
        // 第一个篮球
        isOnepeople:boolean = true,
        isExample:boolean=false,
        // 10分
        image:string='image/play/',
        // websocket服务

       
    },
    mounted: function(){
            // this.ws = new WebSocket("ws://39.108.130.167:2346");
            // this.yidong();
    },
    methods:{
        // 商城
        indexShoping: function(){
            this.index.bor = 1;
            this.isShoping = true;
        },
        // 金币场
        indexJinbi: function(){
            this.index.bor = 1;
            this.isBj = true;
            this.isJinbiSelect = true;
        },
        // 关闭
        indexClose: function(){
            this.index.bor = 0;
            this.isBj = false;
            this.isShoping = false;
            this.isBulletin = false;
            this.isMilitary = false;
            this.isJinbiSelect = false;
            this.isRoomSelect = false;
            this.isAgency = false;
            this.isHelp = false;
        },
        // 进入房卡场
        indexFangka: function(){
            this.index.bor = 1;
            this.isBj = true;
            this.isRoomSelect = true;
        },
        // 公告
        indexBulletin: function(){
            this.index.bor = 1;
            this.isBulletin = true;
        },
        // 代理
        indexAgency: function(){
            this.index.bor = 1;
            this.isAgency = true;
        },
        // 战绩
        indexMilitary: function(){
            this.index.bor = 1;
            this.isMilitary = true;
        },
        // 帮助玩法
        indexHelp: function(){
            this.index.bor = 1;
            this.isHelp = true;
        },
        // 进入金币场
        indexJinMoneyC: function(money){
            // alert(money);
            window.location.href = 'play.html';
        },
        // 快速进入游戏,随机
        indexJinbiQuick: function(){
            // alert('这是随机')
            window.location.href = 'play.html'
        },
        //购买金币
        indexMoney: function(){
            if(this.index.shopingMoneyImage == 'image/shop/jinbi.png'){
                this.index.shopingMoneyImage = 'image/shop/jb.png';
                this.index.shopingRoomImage = 'image/shop/gmfk.png';
                this.isRoomImageC = false;
                this.isMoneyImageC = true;
            }
        },
       
        // 购买房卡
        indexRoom: function(){
            if(this.index.shopingRoomImage == 'image/shop/gmfk.png'){
                this.index.shopingMoneyImage = 'image/shop/jinbi.png';
                this.index.shopingRoomImage = 'image/shop/fangka.png';
                this.isMoneyImageC = false;
                this.isRoomImageC = true;
            }
        },
        // 支付
        APlay: function(num){
            alert(num)
        }, 
        // 计数器
        indexCounter: function(e){
            if(this.RoomNumber.length >= 6){
                return
            }else{
                this.RoomNumber += e;
                if(this.RoomNumber.length ==6){
                    // 向后台发送房间号消息
                    // alert(this.num );
                    this.index.bor = 0;
                    this.isBj = false;
                    this.isRoomSelect = false;
                    window.location.href='play.html'
            
                  }
            }        
            // console.log(this.RoomNumber)
        },
        // 删除
        tuiGe: function(){
            let nn= this.RoomNumber.substring(0,this.RoomNumber.length - 1);
            this.RoomNumber = nn; 
            if(this.RoomNumber.length==0){
              this.RoomNumber='';
            }else{
              this.RoomNumber=(nn);
            }
        },
        // 重输
        clearNum: function(){
            this.RoomNumber = '';
        },
        // 加入房间
        indexAddRoom: function(){
            if( this.RoomNumber == ''||  this.RoomNumber == null){
                // console.log('请输入房间号');
            }else{
                // console.log( this.RoomNumber);
            }
        },
        // 投篮开始显示力度表
        GrabLeft: function(){
            this.isVigorBor = true;
        },
        // 投篮松开力度表小时篮球出去
        GrabClear: function(ev){
            this.isVigorBor = false;
            this.playLi();
            // this.GrabBastDownsT();
            // var oDiv = $('.play_left_people_footerBasketball')[0];
            // var oDiv2 = $('#yi')[0];
            
            // var t1 = oDiv.offsetTop;  
            // var l1 = oDiv.offsetLeft;  
            // var r1 = oDiv.offsetLeft + oDiv.offsetWidth;  
            // var b1 = oDiv.offsetTop + oDiv.offsetHeight;  
            // console.log('这是篮球的位置信息:top'+t1 + '-:left:'+l1 + '-'+r1+b1 );
            // var t2 = oDiv2.offsetTop;  
            // var l2 = oDiv2.offsetLeft;  
            // var r2 = oDiv2.offsetLeft + oDiv2.offsetWidth;  
            // var b2 = oDiv2.offsetTop + oDiv2.offsetHeight;  
            // console.log('这是球框的位置信息:top'+t2 + '-:left:'+l2 + '-'+r2+b2 );
        },
        charge: function(){
            var not_bind2 = 0;
            var $that = this;
            var is_zhong2 = false;
            var n = 0;
            $('.scroll_con_1').children().each(function(){
                 // 每一个球框的left值 
                var tgtL = $(this).position().left;
                // 当前元素
                var $this = $(this);
                // 这个值得宽度
                // 这个值得索引值            
                if(  tgtL >= 110 && tgtL <= 160 ){     
                    
                    not_bind2 = 0;
                    is_zhong2 = true;
                    if($this.index()==0){
                        n = 10;
                    }else if($this.index()==1){
                        n = 20;
                    }else if($this.index()==2){
                        n = 30;
                    }else if($this.index()==3){
                        n = 40;
                    }else if($this.index()==4){
                        n = 50;
                    }
                    $that.play.FractionNume += n;
                    $this.children('img')[0].src =$that.image+ ($this.index()+1)+'0f.png';
                    setTimeout(function(){
                        $this.children('img')[0].src =$that.image+ ($this.index()+1)+'0.png';
                        // $that.play.santenNum='30';
                    },100);
                    setTimeout(function(){
                        $this.children('img')[0].src =$that.image+ ($this.index()+1)+'0s.png';
                        // $that.play.santenNum='30s';
                    },200);
                    setTimeout(function(){
                        $this.children('img')[0].src =$that.image+ ($this.index()+1)+'0fen.png';
                        $('.scroll_con_1').children('.bg7').eq($this.index()).children('.guang').animate({
                            'opacity':1
                        },500)
                        // $that.play.santenNum='30fen';
                        $that.isExample = true;
                        $that.isOnepeople = true;
                        setTimeout(function(){
                            $('.scroll_con_1').children('.bg7').eq($this.index()).children('.guang').animate({
                                'opacity':0
                            },50)
                        },200)
                        setTimeout(function(){
                            // $this.children('.guang').animate('width','0%')
                            $that.isExample = false;
                        },2000)
                    },300);

                    console.log($this.index()+'投中了')
                  }else{
                    not_bind2 ++;
                    if(not_bind2 == 5 && !is_zhong2){
                        $that.isOnepeople = true;
                    }
                  }
            });
        },
        // 篮球下垂一下本人 顶层
        GrabBastDown: function(){
            // $('.play_left_people_footerBasketball').animate({
            //     'top': '72%'
            // },500,function(){
                 var $that = this;
                $('.onepeople').animate({
                    'top': '12%'
                },500,function(){
                    $that.isOnepeople = false;
                    $('.onepeople').animate({
                        'top': '70%'
                    },500)
       
                    setTimeout(function(){
                        $that.charge();
                    },10)
                })
                
        // })
        },
        GrabBastDownT: function(){
            // $('.play_left_people_footerBasketball').animate({
            //     'top': '72%'
            // },500,function(){
                $('.onepeople').animate({
                    'top': '33%'
                },500,function(){
                    $('.onepeople').animate({
                        'top': '70%'
                    },500)
                })
        // })
        },
         // 篮球下垂一下队友 顶层
         GrabBastDowns: function(){
            // $('.play_left_people_footerBasketball').animate({
            //     'top': '72%'
            // },500,function(){
                $('.twopeople').animate({
                    'top': '12%'
                },500,function(){
                    $('.twopeople').animate({
                        'top': '70%'
                    },500)
                })
               
        },
        GrabBastDownsT: function(){
            // $('.play_left_people_footerBasketball').animate({
            //     'top': '72%'
            // },500,function(){
                $('.twopeople').animate({
                    'top': '33%'
                },500,function(){
                    $('.twopeople').animate({
                        'top': '70%'
                    },500)
                })
        // })
        },
        // 解散房间
        PlayDissolve: function(){
            window.location.href='index.html'
        },
        // 判断力度大小
        playLi: function(){
            let bott = $('.play_left_people_footerVigor').css('bottom');
            // console.log(bott);
            if($('.play_left_people_footerVigor').css('bottom') >= '30px' && $('.play_left_people_footerVigor').css('bottom') < '50px'){
                this.GrabBastDownT();
                // this.GrabBastDownsT();
            }
            if($('.play_left_people_footerVigor').css('bottom') > '50px'  && bott < '80px'){
                this.GrabBastDown();
                // this.GrabBastDowns();
              
            }
            
                
        },
        // 移动
        yidong: function(){
            var odiv =document.getElementsByClassName('play_cont_section')[0];
            var odivs =document.getElementsByClassName('play_cont_sections')[0];
            var odiv1 =document.getElementsByClassName('play_cont_section')[1];
            var odivs1 =document.getElementsByClassName('play_cont_sections')[1];
            var oimg = $('.scroll_con_item');
            var otime = null;
            
            otime = setInterval(function(){
                odiv.scrollLeft++;
                odivs.scrollLeft++;
                odiv1.scrollLeft++;
                odivs1.scrollLeft++;
                this.zhi = odiv.scrollLeft / 2;
                // console.log(this.zhi);
                if(odiv.scrollLeft >= oimg[0].offsetWidth * 5) {
                    odiv.scrollLeft = 0;
                    odiv1.scrollLeft = 0
                }
                if(odivs.scrollLeft >= oimg[0].offsetWidth * 2) {
                    odivs.scrollLeft = 0;
                    odivs1.scrollLeft = 0
                }
            }, 10);            
        },
        // 定义的数组:
        dingyi: function(){
            var define = [0,0,0,0,0,]
        }

    }
})